<template>
	<view class="navBox">
		<!-- <view class="nav-item" 
			v-for="(item,index) in navBarList" 
			:key="index"
			:class="navBarActive == index ? 'check': 'unCheck'">
			<i class="iconfont" :class="item.icon" style="font-size: 40upx;"></i>
			<navigator :url="item.pageUrl">{{item.text}}</navigator>
		</view> -->
		<view class="nav-item" :class="navBarActive == 0 ? 'check': 'unCheck'">
			<i class="iconfont icon-home_fill_light"></i>
			<navigator url="/pages/test/test2">首页</navigator>
		</view>
		<view class="nav-item" :class="navBarActive == 1 ? 'check': 'unCheck'">
			<i class="iconfont icon-my_fill_light"></i>
			<navigator url="/pages/test/test3">我的</navigator>
		</view>
		<view class="nav-item" :class="navBarActive == 2 ? 'check': 'unCheck'">
			<i class="iconfont icon-my_fill_light"></i>
			<navigator url="/pages/test/test4">我的</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		name:"manager-navBar",
		props: ['navBarActive'],
		data() {
			return {
				navBarList: [
					{
						text: '首页',
						pageUrl: '/pages/test/test2',
						icon: 'icon-home_fill_light'
					},
					{
						text: '我的',
						pageUrl: '/pages/test/test3',
						icon: 'icon-my_fill_light'
					},
				]
			};
		}
	}
</script>

<style>
.navBox {
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: ;
	background: #fff;
	padding: 20upx 0;
	position: fixed;
	bottom: 0;
}
.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #888;
}
.check {
	color: #eb7e00;
}
.unCheck {
	color: #888;
}
</style>